<template>
	<view class="topic_analysis_container">
		<z-paging-swiper v-if="data?.topics.length > 0">
			<swiper>
				<swiper-item v-for="(item, index) in data?.topics" :key="item._id">
					<scroll-view scroll-y>
						<view class="container">
							<view class="content">
								<text class="content_type"> [{{stringFromValue(item.topic.question_type)}}] </text>
								<text class="content_text">{{item.topic.question_content}}</text>
							</view>
						</view>
						<view v-if="item.topic.question_type == 0 || item.topic.question_type == 1"
							class="options_container">
							<view v-for="(option, option_index) in item.topic.options" :key="option._id"
								class="options_item flex-row">
								<view :class="['options_letter_base', 
									isUserAnswerAndCorrect(item, option) ? 'options_icon_correct' : '',
									isUserAnswerButError(item, option) ? 'options_icon_error' : '']">
									{{option.option_code}}
								</view>
								<view class="option_content_base">
									{{option.option_content}}
								</view>
							</view>
						</view>
						<!-- 正确答案 -->
						<view class="answer_container">
							<view>
								正确答案： <text class="answer_correct">{{item.topic.answer.join(",")}}</text>
							</view>
							<view>
								你的选择： <text class="answer_answered">{{item.user_answer.join(",")}}</text>
							</view>
						</view>

						<!-- 解析 -->
						<view class="analysis_container">
							<view class="analysis_tips">
								解析：
							</view>
							<view class="analysis_content">
								<text> {{item.topic.analysis || '略'}}</text>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</z-paging-swiper>
		<z-paging-empty-view v-if="data?.topics.length == 0" emptyViewText='真厉害,全都都答对了~'>
		</z-paging-empty-view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'

	import {
		ref
	} from 'vue';

	import {
		stringFromValue
	} from '@/utils/question.js'
	// 考试id
	let exams_id;
	// uniCloud
	const topic_exams = uniCloud.importObject('topic-exams')
	// 
	const data = ref(null)
	// onLoad
	onLoad(async (params) => {
		exams_id = params.id
		// 请求
		let res = await topic_exams.exam_error_analysis(exams_id)
		console.log('错题解析', res);
		if (res.errCode != 0) {
			return
		}
		data.value = res.data[0]
	})
	/* 用户选择了改选项，并且改选项是正确答案 */
	function isUserAnswerAndCorrect(params, option) {
		return params.user_answer.includes(option.option_code) && option.is_correct
	}

	/* 用户选择了改选项，但是改选项不是正确答案 */
	function isUserAnswerButError(params, option) {
		return params.user_answer.includes(option.option_code) && !option.is_correct
	}
</script>

<style lang="scss" scoped>
	.topic_analysis_container {
		swiper {
			height: 100%;

			.container {
				padding: 0 40rpx;

				.content {
					margin-top: 40rpx;

					.content_type {
						font-size: 26rpx;
						color: $me-color-blue;
					}

					.content_text {
						color: $me-color-gray-1;
						font-size: 26rpx;
					}
				}
			}

			.options_container {
				padding: 0 40rpx 40rpx;

				.options_item {
					align-items: center;
					margin-top: 48rpx;

					.options_letter_base {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 60rpx;
						height: 60rpx;
						border-radius: 30rpx;
						color: $me-color-gray-1;
						border: 1rpx solid $me-color-gray-1;
					}

					.option_content_base {
						flex: 1;
						font-size: 30rpx;
						margin-left: 20rpx;
						color: $me-color-gray-1;
					}

					.options_item:first-child {
						margin-top: 36rpx;
					}

					.options_icon_correct {
						color: $me-color-green-1;
						border: 1rpx solid $me-color-green-1;
					}

					.options_icon_error {
						color: white;
						background-color: $me-color-red-1;
						border: 1rpx solid $me-color-red-1;
					}
				}

			}

			.answer_container {
				padding: 20rpx 40rpx;
				font-size: 26rpx;
				color: $me-color-gray-1;
				border-top: 1rpx solid $me-color-background;

				.answer_correct {
					font-size: 26rpx;
					color: $me-color-green-1;
				}

				.answer_answered {
					font-size: 26rpx;
					color: $me-color-red-1;
				}
			}

			.analysis_container {
				padding: 20rpx 40rpx;
				border-top: 1rpx solid $me-color-background;

				.analysis_tips {}

				.analysis_content {
					margin-top: 16rpx;
					color: $me-color-gray-6;

					text {
						color: $me-color-gray-1;
					}
				}
			}
		}
	}
</style>